<template>
  <!--  用户最近操作记录-->
  <div class="block">
    <el-card>
      <el-timeline>
        <el-timeline-item v-for="(item,index) of operaline" :key="index" size="large" :icon="item.operaType | OperaMatchIcon(item.operaType)" :color=" item.operaType | OperaMatchColor(item.operaType)" :timestamp="item.operaTime | formatdate(item.operaTime)" placement="top">
          <el-card shadow="hover">
            <div>
              <h3 style="text-align: center"><i style="font-size: 20px" :class="item.operaType | OperaMatchIcon(item.operaType)" /> {{ item.operaTitle }}</h3>
              <h5 style="text-align: right; color: #92a6c0"><i style="font-size: 15px" class="el-icon-timer" />处理时间： {{ item.consumingTime }} Mills</h5>
            </div>
            <el-divider content="内容" />
            <p><i style="font-size: 20px" class="el-icon-user" /> 操作用户ID：{{ item.userCode }}</p>
            <p><i style="font-size: 20px" class="el-icon-tickets" /> 日志操作记录概括：{{ item.operaContent }}</p>
            <p><i style="font-size: 20px" class="el-icon-s-opportunity" /> 请求方式：[{{ item.requestMethodType }}]</p>
            <p><i style="font-size: 20px" class="el-icon-position" /> 请求IP：[{{ item.requestIp }}]</p>
            <p><i style="font-size: 20px" class="el-icon-copy-document" /> 请求处理方法名称：[{{ item.requestMethodName }}]</p>
            <p><i style="font-size: 20px" class="el-icon-connection" /> 请求处理路径URI：[{{ item.requestPath }}]</p>
            <p><i style="font-size: 20px" class="el-icon-data-analysis" /> 请求参数详情：<el-input v-model="item.requestParams" autosize readonly type="textarea" /></p>
            <p> 响应结果：<i style="font-size: 20px" :class="item.operaResult | ExceptionStatusIcon(item.operaResult)" /></p>
            <!--          如果日志类型是错误类型，就额外展示错误信息-->
            <div v-if="item.type === 2">
              <p><i style="font-size: 20px" class="el-icon-tickets" /> 错误信息：[{{ item.errorMsg }}]</p>
              <p><i style="font-size: 20px" class="el-icon-tickets" /> 异常描述：[{{ item.exDesc | contextCheckFilter(item.exDesc) }}]</p>
              <p><i style="font-size: 20px" class="el-icon-tickets" /> 异常信息：[{{ item.exDetail | contextCheckFilter(item.exDetail) }}]</p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
// const { getOperaInfoList } = require('@/api/user')
import { fomatMilsToDate } from '@/utils/DateUtil'
const { getOperaInfoList } = require('@/api/user')
const { getMenus } = require('@/utils/profileStatus')
import { mapGetters } from 'vuex'
export default {
  name: 'TimeLine',
  // 过滤器
  filters: {
    formatdate: function(mils) {
      return fomatMilsToDate(mils)
    },
    OperaMatchColor: function(type) {
      if (type === '01') {
        return 'green'
      } else if (type === '02') {
        return 'red'
      } else {
        return '#BD8E3E'
      }
    },
    OperaMatchIcon: function(type) {
      if (type === '01') {
        return 'el-icon-folder-add'
      } else if (type === '02') {
        return 'el-icon-folder-delete'
      } else {
        return 'el-icon-edit'
      }
    },
    ExceptionStatusIcon: function(status) {
      if (status === '1') { // 响应成功
        return 'el-icon-success'
      } else if (status === '0') { // 响应错误
        return 'el-icon-error'
      } else {
        return 'el-icon-warning'
      }
    },
    contextCheckFilter: function(text) {
      if (text === '' || text === undefined || text === null) {
        return '暂无信息'
      }
    }
  },
  props: {
    operadata: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      operaline: [] // 操作记录数组集合
    }
  },
  computed: {
    ...mapGetters([
      'usercode'
    ])
  },
  mounted() {
    this.getOperaData()
  },
  methods: {
    getdata() {
      this.getOperaData()
    },
    async getOperaData() {
      const usercode = this.usercode
      const { data } = await getOperaInfoList(usercode)
      const header = data.respOutMsgHeader
      this.operaline = data.main
      if (header.respCode === 200 && getMenus() === 'timeline') {
        this.$message({
          type: 'success',
          iconClass: 'el-icon-loading',
          message: '用户操作日志信息刷新成功,刷新时间：' + header.respTime,
          duration: 1.5 * 1000
        })
      }
    }
  }
}
</script>
